{extend name="layout/base" /} {block name="main"}
<article class="main__content content">
    <form action="save" method="post">
        <div class="content__wrapper form">
            <div class="form__group">
                <div class="form__label">
                    订单编号 :
                </div>
                <input name="order_no" value="{$order.order_no}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    用户名 :
                </div>
                <input value="{$order.username}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    客房名称 :
                </div>
                <input value="{$order.room_name}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    房间号 :
                </div>
                <input name="room_number" value="{$order.room_number}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    入住日期 :
                </div>
                <input name="start_date" value="{$order.start_date}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    离店日期 :
                </div>
                <input name="end_date" value="{$order.end_date}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    总价 :
                </div>
                <input name="total" value="{$order.total}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    预定时间 :
                </div>
                <input name="create_time" value="{$order.create_time}" type="text" class="textfield"  disabled />
            </div>
            <div class="form__group">
                <div class="form__label">
                    押金 :
                </div>
                <input name="deposit_amount" value="{$order.deposit_amount}" type="text" class="textfield" {$order['status'] == 4 ? 'disabled' : ''}/>
            </div>
            {if $order['status'] == 4}
            <div class="form__group">
                <div class="form__label">
                    其他消费金额 :
                </div>
                <input name="consumption_amount" value="{$order.consumption_amount}" type="text" class="textfield"/>
            </div>
            <div class="form__group">
                <div class="form__label">
                    应退押金 :
                </div>
                <input name="refund_amount" value="0" type="text" class="textfield" disabled/>
            </div>
            {/if}
            <input name="status" value="{$order.status}" type="hidden"/>
            <input name="id" value="{$order.id}" type="hidden"/>
            <div class="form__group">
                <button style="margin: 4% 40%" class="button button--radius button--blue am-margin-0">
                    <i class="fa fa-send"></i> &nbsp;
                    {if $order['status'] == 3}
                        办理入住
                    {elseif $order['status'] == 4}
                        提交退房
                    {else}
                        提交
                    {/if}
                </button>
            </div>
        </div>
    </form>

    <script>
        const depositAmountInput = document.getElementsByName('deposit_amount')[0];
        const consumptionAmountInput = document.getElementsByName('consumption_amount')[0];
        const refundAmountInput = document.getElementsByName('refund_amount')[0];

        function calculateRefundAmount() {
            const depositAmount = parseFloat(depositAmountInput.value) || 0;
            const consumptionAmount = parseFloat(consumptionAmountInput.value) || 0;
            const refundAmount = depositAmount - consumptionAmount;
            refundAmountInput.value = refundAmount.toFixed(2);
        }

        consumptionAmountInput.addEventListener('input', calculateRefundAmount);

        calculateRefundAmount();
    </script>
</article>
{/block}
